<template>
  <div class="app-container">
    <div>
      <h3>区域名称&emsp;&emsp;:&emsp;&emsp;{{ cityname }}</h3>
    </div>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['manage:areaItem:add']"
          >新增</el-button
        >
      </el-col>

      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="areaItemList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="服务名称" align="center" prop="serviceName" />
      <el-table-column label="服务类型" align="center" prop="serviceTypeName" />
      <el-table-column label="参考价格" align="center" prop="servicePrice" />
      <el-table-column label="区域价格" align="center" prop="regionalPrice">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.regionalPrice"
            @change="
              updateRegionalPriceApi(scope.row.id, scope.row.regionalPrice)
            "
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="是否热门" align="center" prop="hot">
        <template slot-scope="scope">
          {{ scope.row.hot == 0 ? "否" : "是" }}
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          {{
            scope.row.status == 0
              ? "草稿"
              : scope.row.status == 1
              ? "已上架"
              : "已下架"
          }}
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['manage:areaItem:remove']"
            >删除</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="enabledStateApi(scope.row.id, scope.row.status)"
            >{{ scope.row.status == 1 ? "下架" : "上架" }}</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="settingsHotApi(scope.row.id, scope.row.hot)"
            >{{ scope.row.hot == 0 ? "设为热门" : "取消热门" }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改区域服务管理对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
      <div>
        <div
          class="box-wrapper"
          style="display: flex; justify-content: space-between"
        >
          <div style="width: 20%">
            <div v-for="(value, index) in serverTypeList" :key="index">
              <el-button
                size="mini"
                type="text"
                @click="getAvailableList(value.id)"
                >{{ value.serviceTypeName }}</el-button
              >
            </div>
          </div>
          <div style="width: 40%">
            <template>
              <el-input
                v-model="serviceName"
                placeholder="请输入服务名称"
                clearable
                @change="selectServiceNameApi(serviceName)"
              ></el-input>
              <el-table
                ref="multipleTable"
                :data="serverList"
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55"> </el-table-column>

                <el-table-column prop="serviceName" label="服务名称">
                </el-table-column>
                <el-table-column prop="servicePrice" label="参考价格">
                </el-table-column>
              </el-table>
            </template>
          </div>
          <div style="width: 40%">
            <div>
              已选中的服务 ({{ servercounter }}) <br />
              <br />
            </div>
            <template>
              <el-table
                ref="multipleTable"
                :data="serverListId"
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55"> </el-table-column>

                <el-table-column prop="serviceName" label="服务名称">
                </el-table-column>
                <el-table-column prop="servicePrice" label="参考价格">
                </el-table-column>

                <el-table-column>
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-delete"
                      @click="serverListIdDeleteApi(scope.row.id)"
                    ></el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addAreaItem()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listAreaItem,
  getAreaItem,
  delAreaItem,
  addAreaItem,
  updateAreaItem,
  enabledState,
  settingsHot,
  updateRegionalPrice,
} from "@/api/manage/areaItem";

import {
  listItemId,
  listItemTypeId,
  selectServiceName,
} from "@/api/manage/item";
import { listType } from "@/api/manage/type";
export default {
  name: "AreaItem",
  data() {
    return {
      //服务名称
      serviceName:null,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 区域服务管理表格数据
      areaItemList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        id: null,
        serviceItmeId: null,
        serviceTypeId: null,
        serviceAreaId: null,
        regionalPrice: null,
        hot: null,
        status: null,
        logicalDeletion: null,
      },
      //添加
      serviceAreaItemVo: {
        areaId: null,
        serviceItems: [],
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      cityname: null,
      serverTypeList: [],
      checkList: [],
      serverList: [],
      checked: false,
      multipleSelection: [],
      itemids: [],
      serverListId: [],
      //计数器
      servercounter: 0,
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    this.getTypeList();
  },
  methods: {
    /** 查询区域服务管理列表 */
    getList() {
      this.loading = true;
      this.queryParams.serviceAreaId = this.$route.query.id;
      this.cityname = this.$route.query.cityname;
      listAreaItem(this.queryParams).then((response) => {
        this.areaItemList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    // 表单重置
    reset() {
      this.form = {
        id: null,
        serviceItmeId: null,
        serviceTypeId: null,
        serviceAreaId: null,
        regionalPrice: null,
        hot: null,
        status: null,
        logicalDeletion: null,
      };
      this.resetForm("form");
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加区域服务管理";
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      if(row.status!=2){
        this.$modal.msgError("该区域服务已启用，无法删除");
      }else{
         const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除区域服务管理编号为"' + ids + '"的数据项？')
        .then(function () {
          return delAreaItem(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
      }
     
    },
    /** 启用禁用 */
    enabledStateApi(id, status) {
      if (status != 1) {
        status = 1;
      } else {
        status = 2;
      }
      /** 启用禁用 */
      enabledState(id, status).then((resp) => {
        this.getList();
        if (status == 1) {
          this.$modal.msgSuccess("上架成功");
        } else {
          this.$modal.msgSuccess("下架成功");
        }
      });
    },
    settingsHotApi(id, hot) {
      if (hot != 0) {
        hot = 0;
      } else {
        hot = 1;
      }
      /** 启用禁用 */
      settingsHot(id, hot).then((resp) => {
        this.getList();
        if (hot == 1) {
          this.$modal.msgSuccess("设置热门成功");
        } else {
          this.$modal.msgSuccess("取消热门成功");
        }
      });
    },
    updateRegionalPriceApi(id, regionalPrice) {
      updateRegionalPrice(id, regionalPrice).then((resp) => {
        this.getList();
        //修改成功
        this.$modal.msgSuccess("修改成功");
      });
    },

    /**服务 */
    getAvailableList(id) {
      console.log(id);
      listItemTypeId(id).then((response) => {
        this.serverList = response.data;
      });
    },
    /**类型 */
    getTypeList() {
      listType().then((response) => {
        this.serverTypeList = response.rows;
      });
    },
    /**复选框 */
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
      this.multipleSelectionApi();
    },
    multipleSelectionApi() {
      this.multipleSelection.forEach((resp) => {
        this.itemids.push(resp.id);
      });
      this.itemids = Array.from(new Set(this.itemids));

      listItemId(this.itemids).then((resp) => {
        this.serverListId = resp.data;
        this.servercounter = this.serverListId.length;
      });
    },
    /**添加 */
    addAreaItem() {
      this.serviceAreaItemVo.areaId = this.queryParams.serviceAreaId;
      this.serviceAreaItemVo.serviceItems = this.serverListId;
      addAreaItem(this.serviceAreaItemVo).then((resp) => {
        this.getList();
        //添加

        //判断添加是否成功
        if (resp.code == 200) {
          this.$modal.msgSuccess("添加成功");
        } else {
          this.$modal.msgError("以重复");
        }
       
        
      });
    },
    // 删除以选中的服务
    serverListIdDeleteApi(id) {
      this.serverListId.forEach((resp) => {
        //存在进行删除
        if (resp.id == id) {
          this.serverListId.splice(this.serverListId.indexOf(resp), 1);
        }
        this.servercounter = this.serverListId.length;
      });
      this.itemids.forEach((resp) => {
        if (resp == id) {
          this.itemids.splice(this.itemids.indexOf(resp), 1);
        }
         this.servercounter = this.serverListId.length;
      });




    },
    //根据服务名称进行搜索
    selectServiceNameApi(serviceName) {
      if (serviceName.length==0) {
        serviceName=null;
      }
      console.log(serviceName);
      selectServiceName(serviceName).then((resp) => {
        this.serverList = resp.data;
      });
    },
  },
};
</script>
